<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
        <title>Welcome to Design Zone......</title>
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/file-upload.css" />
        <link rel="stylesheet" type="text/css" href="../../styles/dzbase.css" />
        <script type="text/javascript" src="../../scripts/ext/adapter/ext-base.js">
        </script>
        <script type="text/javascript" src="../../scripts/ext/ext-all.js">
        </script>
        <script type="text/javascript" src="../../scripts/form/FileUploadField.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/GroupSummary.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/RowExpander.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/EditableItem.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/RangeMenu.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/GridFilters.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/Filter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/StringFilter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/ListFilter.js">
        </script>
        <script type="text/javascript" src="../../scripts/i18nMessage.js">
        </script>
        <script type="text/javascript" src="../../scripts/utils.js">
        </script>
        <script type="text/javascript" src="../../scripts/selectPantone.js">
        </script>
		<script type="text/javascript" src="../../scripts/selectDzColor.js">
        </script>
        <script type="text/javascript">
            var orderMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.order');
			var fcMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.francecustomer');
			var fMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.factory');
            var message = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=message');
			var yarnMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.yarn');
			var colorMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.pantonecolor');
            
            var ctDesignTypeXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtDesignType');
            var ctYesnoXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtYesno');
            var customerXmlLoader = new xmlLoader('../../servlet/BiFranceCustomerServlet?action=5');
 			var ctSeasonNumberXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtSeasonNumber');
            
            var ctMaterialTypeStore;
            var ctYesnoStore;
			var customerStore;
			var ctSeasonNumberStore;
			var ctSeasonNumberCombo;
			var selectedDZColor;
			
			var selectDZColorCallback = function(dzColorId, dzColorCode, customerName, customerDepartment, yarnReference, ctYarnMeasure, yarnAccount,
			supplierNumber, customerColorCode, pantoneNumber, realColor,
			ctYarnMaterial1, ctYarnMaterial2, ctYarnMaterial3, ctYarnMaterial4, ctYarnMaterial5, factoryName, photo1Name, photo2Name){
				Ext.getCmp('dzColorId').setValue(dzColorId);
				Ext.getCmp('dzColorCode').setValue(dzColorCode);
				Ext.getCmp('customerName').setValue(customerName);
				Ext.getCmp('customerDepartment').setValue(customerDepartment);
				Ext.getCmp('ctYarnMeasure').setValue(ctYarnMeasure);
				Ext.getCmp('yarnReference').setValue(yarnReference);
				Ext.getCmp('yarnAccount').setValue(yarnAccount);
				Ext.getCmp('supplierNumber').setValue(supplierNumber);
				Ext.getCmp('customerColorCode').setValue(customerColorCode);
				Ext.getCmp('pantoneNumber').setValue(pantoneNumber);
				if(realColor && realColor != '')
					document.getElementById('sampleTable').style['backgroundColor'] = '#' + realColor;
				else
					document.getElementById('sampleTable').style['backgroundColor'] = '#DFE8F6';
				Ext.getCmp('ctYarnMaterial1').setValue(ctYarnMaterial1);
				Ext.getCmp('ctYarnMaterial2').setValue(ctYarnMaterial2);
				Ext.getCmp('ctYarnMaterial3').setValue(ctYarnMaterial3);
				Ext.getCmp('ctYarnMaterial4').setValue(ctYarnMaterial4);
				Ext.getCmp('ctYarnMaterial5').setValue(ctYarnMaterial5);
				Ext.getCmp('factoryNameCN').setValue(selectedDZColor.factoryNameCN);
				Ext.getCmp('factoryNameEN').setValue(selectedDZColor.factoryNameEN);
				Ext.getCmp('dzColorId').setValue(dzColorId);
				
				document.getElementById('customImg').src =  '../../_temp/' + photo1Name;
				document.getElementById('customImg1').src =  '../../_temp/' + photo2Name;
			}
			
			var setReference = function(){
				var maxReferenceIndextXmlLoader = new xmlLoader('../../servlet/OrderYarnServlet?action=10&ctMaterialType=');
				var maxIndex = maxReferenceIndextXmlLoader.getValueByTagName('item');
				//alert(maxIndex);
				document.getElementById('referenceIndex').value = maxIndex;
				document.getElementById('reference').value = 'Y-' + maxIndex;
			}
			
            Ext.onReady(function(){
                Ext.QuickTips.init();
                Ext.form.Field.prototype.msgTarget = 'side';
                
                var idValue = getPrarmeterValue(window.location, 'id');
                var startPage = getPrarmeterValue(window.location, 'startPage');
                
                ctDesignTypeStore = new Ext.data.Store({
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, ['code', 'description']),
                    data: ctDesignTypeXmlLoader.getXml()
                });
				
                ctYesnoStore = new Ext.data.Store({
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, ['code', 'description']),
                    data: ctYesnoXmlLoader.getXml()
                });
                
                customerStore = new Ext.data.Store({
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'id',
                        totalRecords: 'itemTotal'
                    }, ['id', 'name', 'department']),
                    data: customerXmlLoader.getXml()
                });
                
                 ctSeasonNumberStore = new Ext.data.Store({
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, [ 
                    'code', 'description']),
					data: ctSeasonNumberXmlLoader.getXml()
                });
				
                ctDesignTypeCombo = new Ext.form.ComboBox({
                    fieldLabel: orderMessage.get('ui.order.designtype'),
                    id: 'ctDesignType',
                    name: 'ctDesignType',
                    allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
                    editable: false,
                    store: ctDesignTypeStore,
                    valueField: 'code',
                    displayField: 'description',
                    triggerAction: 'all',
                    emptyText: message.get('message.combo.pleaseselect'),
                    selectOnFocus: true,
                    mode: 'local'
                });
                
                isConfirmedCombo = new Ext.form.ComboBox({
                    fieldLabel: orderMessage.get('ui.order.isconfirmed'),
                    id: 'isConfirmed',
                    name: 'isConfirmed',
                    allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
                    editable: false,
                    store: ctYesnoStore,
                    valueField: 'code',
                    displayField: 'description',
                    triggerAction: 'all',
                    emptyText: message.get('message.combo.pleaseselect'),
                    selectOnFocus: true,
                    mode: 'local',
					listeners: {
						select: {
							fn: function (thisCombo, record,index){
								var isConfirmed = isConfirmedCombo.getValue();
								if(isConfirmed == '01'){
									Ext.getCmp('confirmedDate').enable();
								}else{
									Ext.getCmp('confirmedDate').disable();
								}
							}
						}
					}
                });
                
                ctSeasonNumberCombo = new Ext.form.ComboBox({
                    fieldLabel: message.get('message.edit.seasonnumber'),
                    id: 'ctSeasonNumber',
                    name: 'ctSeasonNumber',
                    allowBlank: false,
                    blankText: message.get('message.edit.noblank'),
                    valueField: 'code',
                    typeAhead: true,
                    store: ctSeasonNumberStore,
                    displayField: 'description',
                    forceSelection: true,
                    triggerAction: 'all',
                    emptyText: message.get('message.combo.pleaseselect'),
                    selectOnFocus: true,
                    mode: 'local'
                });
                
                
                var orderYarnForm = new Ext.FormPanel({
                    labelAlign: 'left',
                    url: '../../servlet/OrderYarnServlet?action=1',
                    frame: true,
                    title: orderMessage.get('ui.order.edityarntitle'),
                    bodyStyle: 'padding:5px 5px 5px 5px;margin-top: 2px;',
                    width: '100%',
                    labelWidth: 105,
                    reader: new Ext.data.XmlReader({
                        record: 'item'
                    }, [{
                        name: 'id',
                        mapping: 'id'
                    }, {
                        name: 'dzColorId',
                        mapping: 'dzColorId'
                    }, {
                        name: 'reference',
                        mapping: 'reference'
                    }, {
                        name: 'referenceIndex',
                        mapping: 'referenceIndex'
                    }, {
                        name: 'ctDesignType',
                        mapping: 'ctDesignType'
                    }, {
                        name: 'ctSeasonNumber',
                        mapping: 'ctSeasonNumber'
                    }, {
                        name: 'isConfirmed',
                        mapping: 'isConfirmed'
                    }, {
                        name: 'dzColorId',
                        mapping: 'dzColorId'
                    },{
                    	name: 'orderQuantity',
                    	mapping: 'orderQuantity'
                    }, {
                        name: 'dzColorCode',
                        mapping: 'dzColorCode'
                    },  {
                        name: 'launchDate',
                        mapping: 'launchDate'
                    }, {
                        name: 'confirmedDate',
                        mapping: 'confirmedDate'
                    }, {
                        name: 'customerName',
                        mapping: 'customerName'
                    }, {
                        name: 'customerDepartment',
                        mapping: 'customerDepartment'
                    }, {
                        name: 'customerColorCode',
                        mapping: 'customerColorCode'
                    }, {
                        name: 'yarnReference',
                        mapping: 'yarnReference'
                    }, {
                        name: 'yarnAccount',
                        mapping: 'yarnAccount'
                    }, {
                        name: 'factoryNameCN',
                        mapping: 'factoryNameCN'
                    }, {
                        name: 'factoryNameEN',
                        mapping: 'factoryNameEN'
                    }, {
                        name: 'supplierNumber',
                        mapping: 'supplierNumber'
                    }, {
                        name: 'pantoneNumber',
                        mapping: 'pantoneNumber'
                    }, {
                        name: 'realColor',
                        mapping: 'realColor'
                    }, {
                        name: 'ctYarnMaterial1',
                        mapping: 'ctYarnMaterial1'
                    }, {
                        name: 'ctYarnMaterial2',
                        mapping: 'ctYarnMaterial2'
                    }, {
                        name: 'ctYarnMaterial3',
                        mapping: 'ctYarnMaterial3'
                    }, {
                        name: 'ctYarnMaterial4',
                        mapping: 'ctYarnMaterial4'
                    }, {
                        name: 'ctYarnMaterial5',
                        mapping: 'ctYarnMaterial5'
                    },{
                        id: 'photo1Name',
                        name: 'photo1Name',
                        xtype: 'hidden'
                    },{
                        id: 'photo2Name',
                        name: 'photo2Name',
                        xtype: 'hidden'
                    }, {
                        name: 'remark',
                        mapping: 'remark'
                    }]),
                    //reader: msItemXMLReader,
                    items: [{
                        id: 'id',
                        name: 'id',
                        xtype: 'hidden'
                    },{
                        id: 'dzColorId',
                        name: 'dzColorId',
                        xtype: 'hidden'
                    },{
                        id: 'referenceIndex',
                        name: 'referenceIndex',
                        xtype: 'hidden'
                    },{
                    	id: 'realColor',
                    	name: 'realColor',
                    	xtype: 'hidden'
                    },{
                        id: 'photo1Name',
                        name: 'photo1Name',
                        xtype: 'hidden'
                    },{
                        id: 'photo2Name',
                        name: 'photo2Name',
                        xtype: 'hidden'
                    }, {
                        layout: 'column',
                        items: [{
                            columnWidth: .33,
                            layout: 'form',
                            items: [ctDesignTypeCombo,{
                                id: 'reference',
                                name: 'reference',
                                fieldLabel: orderMessage.get('ui.order.reference'),
                                xtype: 'textfield',
                                allowBlank: false,
                                blankText: message.get('message.edit.noblank'),
                                anchor: '86%',
                                width: '90%',
                                maxLength: 64,
								listeners: {
                                        'render': {
                                            fn: function(){
                                                Ext.getCmp('reference').getEl().on('click', function(){
                                                    setReference();
                                                }, this);
                                            },
                                            scope: this
                                        }
                                    }
                            },{
                                id: 'dzColorCode',
                                name: 'dzColorCode',
                                fieldLabel: orderMessage.get('ui.order.dzcolor'),
                                xtype: 'textfield',
                                allowBlank: false,
                                blankText: message.get('message.edit.noblank'),
                                emptyText: message.get('message.combo.pleaseselect'),
                                anchor: '86%',
                                width: '90%',
                                maxLength: 64,
								readOnly: true,
								listeners: {
                                        'render': {
                                            fn: function(){
                                                Ext.getCmp('dzColorCode').getEl().on('click', function(){
                                                    selectDZColor(selectDZColorCallback);
                                                }, this);
                                            },
                                            scope: this
                                        }
                                    }
                            },{
									xtype:'numberfield',
				                    fieldLabel: orderMessage.get('ui.order.orderquantity') + '(Kg)',
				                    name: 'orderQuantity',
				                    anchor:'90%',
									allowBlank: false,
                        			blankText: message.get('message.edit.noblank'),
									maxLength: 64,
									tabIndex: 1
								},isConfirmedCombo,{
                            		id:'confirmedDate',
                                    name: 'confirmedDate',
                                    fieldLabel: orderMessage.get('ui.order.confirmeddate') + "(d/m/Y)",
                                    xtype: 'datefield',
                                    anchor: '60%',
                                    allowBlank: false,
                                    blankText: message.get('message.edit.noblank')
                             }]
                        }, {
                            columnWidth: .33,
                            layout: 'form',
                            items: [ctSeasonNumberCombo,{
                                id: 'customerName',
                                name: 'customerName',
                                fieldLabel: fcMessage.get('ui.francecustomer.name'),
                                xtype: 'textfield',
                                blankText: message.get('message.edit.noblank'),
                                anchor: '86%',
                                width: '90%',
                                maxLength: 64,
								readOnly: true
                            },{
                                id: 'customerDepartment',
                                name: 'customerDepartment',
                                fieldLabel: fcMessage.get('ui.francecustomer.department'),
                                xtype: 'textfield',
                                blankText: message.get('message.edit.noblank'),
                                anchor: '86%',
                                width: '90%',
                                maxLength: 64,
								readOnly: true
                            },{
									id: 'customerColorCode',
                                    name: 'customerColorCode',
                                    fieldLabel: dzColorMessage.get('ui.dzcolor.customercolorcode'),
                                    xtype: 'textfield',
                                    anchor: '86%',
									width: '90%',
                                    blankText: message.get('message.edit.noblank'),
                                    maxLength: 256,
								    readOnly: true
                                }]
                        }, {
                            columnWidth: .33,
                            layout: 'form',
                            items: [{
                                    name: 'launchDate',
                                    fieldLabel: orderMessage.get('ui.order.launchdate') + "(d/m/Y)",
                                    xtype: 'datefield',
                                    anchor: '60%',
                                    allowBlank: false,
                                    blankText: message.get('message.edit.noblank')
                             },{
                                id: 'factoryNameCN',
                                name: 'factoryNameCN',
                                xtype: 'textfield',
                                fieldLabel: fMessage.get('ui.factory.name'),
                                anchor: '86%',
								width: '90%',
                                maxLength: 64,
                                maxLengthText: message.get('message.edit.toolong'),
								readOnly: true
                            },{
                                id: 'factoryNameEN',
                                name: 'factoryNameEN',
                                xtype: 'textfield',
                                fieldLabel: '',
                                labelSeparator: '',
                                anchor: '86%',
								width: '90%',
                                maxLength: 64,
                                maxLengthText: message.get('message.edit.toolong'),
								readOnly: true
                            },{
		                          id: 'supplierNumber',
		                          name: 'supplierNumber',
		                          xtype: 'textfield',
		                          fieldLabel: dzColorMessage.get('ui.dzcolor.factorycolorcode'),
		                          anchor: '86%',
								  width: '90%',
		                          maxLength: 128,
		                          maxLengthText: message.get('message.edit.toolong'),
								  readOnly: true
		                      },{
		                          id: 'pantoneNumber',
		                          name: 'pantoneNumber',
		                          xtype: 'textfield',
		                          fieldLabel: pantoneMessage.get('ui.pantonecolor.number'),
		                          anchor: '86%',
								  width: '90%',
		                          maxLength: 128,
		                          maxLengthText: message.get('message.edit.toolong'),
								  readOnly: true
		                      },{
                                    html: '<table><tr><td width="125">' +
                                    colorMessage.get('ui.pantonecolor.realcolor') +
                                    ': </td><td><table id="sampleTable" width="60" ><tr height="15"><td>&nbsp;</td></tr></table></td></tr></table>'
                                }]
                        }]
                    },{
						xtype: 'fieldset',
						collapsible: true,
						title: yarnMessage.get('ui.yarn.composition'),
						autoHeight: true,
						items: [{
                            layout: 'column',
                            items: [{
                                columnWidth: .33,
                                layout: 'form',
                                items: [{
	                                id: 'yarnReference',
	                                name: 'yarnReference',
	                                xtype: 'textfield',
	                                fieldLabel: yarnMessage.get('ui.yarn.reference'),
	                                anchor: '86%',
									width: '90%',
	                                allowBlank: false,
	                                blankText: message.get('message.edit.noblank'),
	                                maxLength: 64,
	                                maxLengthText: message.get('message.edit.toolong'),
									readOnly: true
	                            },{
	                                id: 'ctYarnMaterial1',
	                                name: 'ctYarnMaterial1',
	                                xtype: 'textfield',
	                                fieldLabel: yarnMessage.get('ui.yarn.material') + '1',
	                                anchor: '86%',
									width: '90%',
	                                maxLength: 64,
	                                maxLengthText: message.get('message.edit.toolong'),
									readOnly: true
	                            },{
	                                id: 'ctYarnMaterial4',
	                                name: 'ctYarnMaterial4',
	                                xtype: 'textfield',
	                                fieldLabel: yarnMessage.get('ui.yarn.material') + '4',
	                                anchor: '86%',
									width: '90%',
	                                maxLength: 64,
	                                maxLengthText: message.get('message.edit.toolong'),
									readOnly: true
	                            }]
							
							},{
                                columnWidth: .33,
                                layout: 'form',
                                items: [{
	                                id: 'ctYarnMeasure',
	                                name: 'ctYarnMeasure',
	                                xtype: 'textfield',
	                                fieldLabel: yarnMessage.get('ui.yarn.measure'),
	                                anchor: '86%',
									width: '90%',
	                                maxLength: 64,
	                                maxLengthText: message.get('message.edit.toolong'),
									readOnly: true
	                            },{
	                                id: 'ctYarnMaterial2',
	                                name: 'ctYarnMaterial2',
	                                xtype: 'textfield',
	                                fieldLabel: yarnMessage.get('ui.yarn.material') + '2',
	                                anchor: '86%',
									width: '90%',
	                                maxLength: 64,
	                                maxLengthText: message.get('message.edit.toolong'),
									readOnly: true
	                            },{
	                                id: 'ctYarnMaterial5',
	                                name: 'ctYarnMaterial5',
	                                xtype: 'textfield',
	                                fieldLabel: yarnMessage.get('ui.yarn.material') + '5',
	                                anchor: '86%',
									width: '90%',
	                                maxLength: 64,
	                                maxLengthText: message.get('message.edit.toolong'),
									readOnly: true
	                            }]
							},{
                                columnWidth: .33,
                                layout: 'form',
                                items: [{
	                                id: 'yarnAccount',
	                                name: 'yarnAccount',
	                                xtype: 'textfield',
	                                fieldLabel: yarnMessage.get('ui.yarn.yarnaccount'),
	                                anchor: '86%',
									width: '90%',
	                                maxLength: 64,
	                                maxLengthText: message.get('message.edit.toolong'),
									readOnly: true
	                            },{
	                                id: 'ctYarnMaterial3',
	                                name: 'ctYarnMaterial3',
	                                xtype: 'textfield',
	                                fieldLabel: yarnMessage.get('ui.yarn.material') + '3',
	                                anchor: '86%',
									width: '90%',
	                                maxLength: 64,
	                                maxLengthText: message.get('message.edit.toolong'),
									readOnly: true
	                            }]
							
							}]
						}]
					}, {
                        fieldLabel: message.get('message.edit.comment'),
                        name: 'remark',
                        xtype: 'textarea',
                        maxLength: 512,
                        width: '90%',
                        maxLengthText: message.get('message.edit.toolong')
                    }],
                    
                    buttons: [{
                        text: message.get('message.edit.save'),
                        handler: function(){
                            if (orderYarnForm.getForm().isValid()) {
                            
                            	if(idValue == null){
                            		setReference();
                            	}
                            
                                document.getElementsByName('ctDesignType')[0].value = ctDesignTypeCombo.getValue();
                                document.getElementsByName('ctSeasonNumber')[0].value = ctSeasonNumberCombo.getValue();
								document.getElementsByName('isConfirmed')[0].value = isConfirmedCombo.getValue();
								
                                orderYarnForm.getForm().submit({
                                    method: 'post',
                                    success: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.successful'));
                                        orderYarnForm.getForm().reset();
                                    },
                                    failure: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.unsuccessful'));
                                    }
                                });
                            }
                        }
                    }, {
                        text: message.get('message.edit.reset'),
                        handler: function(){
                            orderYarnForm.getForm().reset();
                        }
                    }, {
                        text: message.get('message.edit.cancel'),
                        handler: function(){
                            if (startPage != null) {
                                window.location = 'order_yarn_list.html?startPage=' + startPage;
                            }
                            else {
                                window.location = 'order_yarn_list.html';
                            }
                        }
                    }]
                });
                
                orderYarnForm.render('orderYarn');
                
                new Ext.Resizable('customImg', {
                    wrap: true,
                    pinned: true,
                    dynamic: true,
                    handles: 'all',
                    draggable: true
                });
                
                new Ext.Resizable('customImg1', {
                    wrap: true,
                    pinned: true,
                    dynamic: true,
                    handles: 'all',
                    draggable: true
                });
                
                if (idValue != null) {
                    document.getElementById('id').value = idValue;
                    orderYarnForm.getForm().load({
                        url: '../../servlet/OrderYarnServlet?action=3&id=' + idValue,
                        waitMsg: Ext.LoadMask.prototype.msg,
                        success: function(form, action){
                        	var isConfirmed = isConfirmedCombo.getValue();
							if(isConfirmed == '01'){
								Ext.getCmp('confirmedDate').enable();
							}else{
								Ext.getCmp('confirmedDate').disable();
							}
							if(Ext.getCmp('realColor') && Ext.getCmp('realColor').getValue() != '')
								document.getElementById('sampleTable').style['backgroundColor'] = '#' + Ext.getCmp('realColor').getValue();
							else
								document.getElementById('sampleTable').style['backgroundColor'] = '#DFE8F6';
							document.getElementById('customImg').src =  '../../_temp/' + document.getElementById('photo1Name').value;
							document.getElementById('customImg1').src =  '../../_temp/' + document.getElementById('photo2Name').value;
                        }
                    });
                }
            });
        </script>
    </head>
    <body>
        <div id="OrderYarn">
        </div>
        <img id="customImg" src="../../_temp/noimage.gif"
			style="position: absolute; left: 20%; width: 250px;" />
		<img id="customImg1" src="../../_temp/noimage.gif"
			style="position: absolute; left: 60%; width: 250px;" />
    </body>
</html>